<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排班查询</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
            <el-form-item>
                <div class="block">
                    <span class="demonstration">排班日期</span>
                    <el-date-picker
                            v-model="queryForm.dutyDate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="科室">
                <el-input v-model="queryForm.administrativeName"></el-input>
            </el-form-item>
            <el-form-item label="医生姓名">
                <el-input v-model="queryForm.doctorName"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="dutyId"
                    label="排班编号">
            </el-table-column>
            <el-table-column
                    prop="administrativeName"
                    label="科室">
            </el-table-column>
            <el-table-column
                    prop="doctorId"
                    label="医生ID">
            </el-table-column>
            <el-table-column
                    prop="doctorName"
                    label="医生姓名">
            </el-table-column>
            <el-table-column
                    prop="bookPeopleMax"
                    label="最大预约人数">
            </el-table-column>
            <el-table-column
                    prop="nowBookPeople"
                    label="当前预约人数">
            </el-table-column>
            <el-table-column
                    prop="dutyDate"
                    label="排班日期">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="modifyDuty(scope.row)" type="text" size="small" >修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
                background
                layout="prev, pager, next" :current-page="current"
                :page-count="totalPage" :size="size" @current-change="changePage">
        </el-pagination>

        <!--修改排班信息-->
        <el-dialog
                title="修改排班信息"
                :visible.sync="showModifyDialog"
                width="30%">
            <el-form :model="modifyForm"  ref="form" label-width="100px" >
                <el-form-item label="排班ID" prop="dutyId">
                    <el-input v-model="modifyForm.dutyId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="科室" prop="administrativeName">
                    <el-input v-model="modifyForm.administrativeName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="医生ID" prop="doctorId">
                    <el-input v-model="modifyForm.doctorId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="医生姓名" prop="doctorName">
                    <el-input v-model="modifyForm.doctorName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="最大预约人数" prop="bookPeopleMax">
                    <el-input type="number" :min="10" v-model="modifyForm.bookPeopleMax" ></el-input>
                </el-form-item>
                <el-form-item label="当前预约人数" prop="bookPeopleMax">
                    <el-input type="number"  v-model="modifyForm.nowBookPeople" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="排班日期" prop="dutyDate">
                    <div class="block">
                        <el-date-picker
                                v-model="modifyForm.dutyDate"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="modifyDoctorDuty">修改</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <script>
        function curentTime1() {
            var now = new Date();
            var year = now.getFullYear();       //年
            var month = now.getMonth() + 1;     //月
            var day = now.getDate();            //日
            var hh = "00";            //时
            var mm = "00";          //分
            var ss = "00";          //分
            var clock = year + "-";
            if(month < 10)
                clock += "0";
            clock += month + "-";
            if(day < 10)
                clock += "0";
            clock += day + " ";
            clock +=hh+":"+mm+":"+ss;
            return clock;
        }
        function curentTime2() {
            var now = new Date();
            var year = now.getFullYear();       //年
            var month = now.getMonth() + 1;     //月
            var day = now.getDate()+7;            //日
            var hh = "00";            //时
            var mm = "00";          //分
            var ss = "00";          //分
            var clock = year + "-";
            if(month < 10)
                clock += "0";
            clock += month + "-";
            if(day < 10)
                clock += "0";
            clock += day + " ";
            clock +=hh+":"+mm+":"+ss;
            return clock;
        }
        setInterval("curentTime1()",1000*30);
        setInterval("curentTime2()",1000*30);
        var app=new Vue({
            el:"#app",
            data:{
                tableData:[],
                totalPage:0,
                current:1,
                size:10,
                queryForm:{
                    dutyDate:"",
                    administrativeName:"",
                    doctorName:"",
                },
                showModifyDialog:false,
                modifyForm:{
                    dutyId:"",
                    administrativeName:"",
                    doctorId:"",
                    doctorName:"",
                    bookPeopleMax:"",
                    nowBookPeople:"",
                    dutyDate:"",//排班日期
                },
            },
            mounted:function () {
                this.queryMessageInfo();
            },
            methods:{
                queryMessageInfo:function () {
                    var date1=curentTime1();
                    var date2=curentTime2();
                    if(this.queryForm.dutyDate==""){
                        this.queryForm.dutyDate=[date1,date2];
                    }
                    var vm=this;
                    var params={"pageSize":this.size,dutyDateBefore:this.queryForm.dutyDate[0],dutyDateAfter:this.queryForm.dutyDate[1]};
                    axios.get("/medical/duty/pageQuery",{params:params}).then(function (resp) {
                        console.log(resp);
                        vm.tableData=resp.data.content;
                        vm.totalPage=resp.data.totalPage;
                    })
                },
                changePage:function (curr) {
                    var date1=curentTime1();
                    var date2=curentTime2();
                    if(this.queryForm.dutyDate==""){
                        this.queryForm.dutyDate=[date1,date2];
                    }
                    var vm=this;
                    var params={administrativeName:this.queryForm.administrativeName,dutyDateBefore:this.queryForm.dutyDate[0],dutyDateAfter:this.queryForm.dutyDate[1],pageIndex:curr,pageSize:this.size,doctorName:this.queryForm.doctorName};
                    axios.get("/medical/duty/pageQuery",{params:params}).then(function (resp) {
                        vm.tableData=resp.data.content;
                        vm.totalPage=resp.data.totalPage;
                        vm.current=resp.data.pageIdx;
                    })
                },
                onQuery:function () {
                    var date1=curentTime1();
                    var date2=curentTime2();
                    if(this.queryForm.dutyDate==""){
                        this.queryForm.dutyDate=[date1,date2];
                    }
                    var vm=this;
                    var params={administrativeName:this.queryForm.administrativeName,dutyDateBefore:this.queryForm.dutyDate[0],dutyDateAfter:this.queryForm.dutyDate[1],pageSize:this.size,doctorName:this.queryForm.doctorName};
                    axios.get("/medical/duty/pageQuery",{params:params}).then(function (resp) {
                        vm.tableData=resp.data.content;
                        vm.totalPage=resp.data.totalPage;
                        vm.current=resp.data.pageIdx;
                    })
                },
                modifyDuty:function (row) {
                    this.showModifyDialog=true;
                    this.modifyForm.dutyId=row.dutyId;
                    this.modifyForm.administrativeName=row.administrativeName;
                    this.modifyForm.bookPeopleMax=row.bookPeopleMax;
                    this.modifyForm.doctorId=row.doctorId;
                    this.modifyForm.dutyDate=row.dutyDate;
                    this.modifyForm.doctorName=row.doctorName;
                    this.modifyForm.nowBookPeople=row.nowBookPeople;
                },
                modifyDoctorDuty:function () {
                    var vm=this;
                    var formData=new FormData();
                    formData.append("dutyId",this.modifyForm.dutyId);
                    formData.append("administrativeName",this.modifyForm.administrativeName);
                    formData.append("bookPeopleMax",this.modifyForm.bookPeopleMax);
                    formData.append("doctorId",this.modifyForm.doctorId);
                    formData.append("dutyDate",this.modifyForm.dutyDate);
                    formData.append("doctorName",this.modifyForm.doctorName);
                    formData.append("nowBookPeople",this.modifyForm.nowBookPeople);
                    axios.put("/medical/duty/modifyDoctorDuty",formData).then(function (resp) {
                        if(resp.data.success){
                            let index=-1;
                            for(let i=0;i<vm.tableData.length;i++){
                                if(vm.modifyForm.dutyId==vm.tableData[i].dutyId){
                                    index=i;
                                    break;
                                }
                            }
                            vm.tableData[index].bookPeopleMax=vm.modifyForm.bookPeopleMax;
                            vm.tableData[index].dutyDate=vm.modifyForm.dutyDate;
                            vm.showUpDialog=false;
                            alert("成功修改"+vm.modifyForm.doctorName+"医生值班信息")
                        }else {
                            alert(resp.data.message)
                        }
                    })
                },
            }
        })
    </script>
</body>
</html>